import {defineStore} from "pinia";
import {darkTheme} from "naive-ui";
import {getLocalStorage, setLocalStorage} from "../utils";
import type {ThemeColorType, ThemeState} from '../typings/styles'
import {StorageEnum,ThemeEnum} from '../enums';
// import type {AppThemeColorType} from "@/typings/styles";


const storageTheme = getLocalStorage(StorageEnum.THEME_STORE)
const initThemeState: ThemeState = {
    // 默认是否开启深色主题
    darkTheme: true,
    // 主题名称
    themeName: ThemeEnum.DARK,
    // 默认主题色
    themeColor: '#51d6a9',
    // 默认主颜色的详情
    themeColorDetail: {
        "CMYK": [62, 0, 21, 16],
        "RGB": [81, 214, 169],
        "hex": "#51d6a9",
        "name": "碧空绿",
        "pinyin": "bikonlv"
    },
}
export const useThemeStore = defineStore("theme-store", {
    state: (): ThemeState => storageTheme || ({
        // 是否是深色主题
        darkTheme,
        // 主题名称
        themeName: (darkTheme && ThemeEnum.DARK) || ThemeEnum.LIGHT,
        // 默认主题色
        themeColor: initThemeState.themeColor,
        // 主颜色的详情
        themeColorDetail: initThemeState.themeColorDetail,
    }),
    getters: {
        getDarkTheme(): boolean {
            return this.darkTheme
        },
        getThemeColor(): string {
            return this.themeColor
        },
        getThemeColorDetail(): ThemeColorType | null {
            return this.themeColorDetail
        }
    },
    actions: {
        changeTheme(): void {
            this.darkTheme = !this.darkTheme;
            this.themeName = this.darkTheme ? ThemeEnum.DARK : ThemeEnum.LIGHT
            setLocalStorage(StorageEnum.THEME_STORE, this.$state)
        },

        setThemeColorType(color: ThemeColorType): void {
            this.themeColor = color.hex
            this.themeColorDetail = color
            setLocalStorage(StorageEnum.THEME_STORE, this.$state)
        }
    },
});
